<template>
  <div class="basic-info">
    <div style="position: relative;width:100%;height:50px;">
      <van-nav-bar
        fixed
        title="基本信息"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="slider-box">
      <div class="slider">
        <div class="slider-bar"><div class="slider-button">25%</div></div>
      </div>
    </div>
    <div class="form">
      <van-cell-group>
        <van-cell title="月均收入" is-link :value="incomeValue" @click="income" />
        <van-cell title="婚姻状况" is-link :value="marriageValue" @click="marriage"/>
        <van-cell title="是否有车" is-link :value="carValue" @click="car"/>
        <van-field label="期望借款金额" input-align="right" type="number" v-model="money" placeholder="最低输入1000元" />
        <van-field label="单位名称" input-align="right" v-model="unitName" @input="changeValue"  placeholder="所在的公司或实体店铺全称" />
        <van-cell title="单位地区" title-class="width100" is-link :value="unitValue"  @click="areaClick('unit')"/>
        <van-field v-model="unitAddress" placeholder="请输入单位的详细地址（必填）" v-if="this.unitValue!='选择所在城市'" @input="changeValue1" icon="question" @click-icon="dialog"/>
        <van-cell title="居住地区" title-class="width100" is-link :value="homeValue"  @click="areaClick('home')"/>
        <van-field v-model="homeAddress" placeholder="请输入居住的详细地址 (必填)" v-if="this.homeValue!='选择居住城市'" @input="changeValue2" icon="question" @click-icon="dialog"/>
      </van-cell-group>
    </div>
    <van-button class="btn"
          :disabled="!((incomeValue!='请选择')&&(marriageValue!='请选择')&&(carValue!='请选择')&&(money!='')&&(unitName!='')&&(unitValue!='选择所在城市')&&(unitAddress!='')&&(homeValue!='选择居住城市')&&(homeAddress!=''))"
          round size="normal"
          @click="btnClick">下一步</van-button>
    <!-- 收入等弹出框 -->
    <van-actionsheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"/>
    <!-- 地址选择弹出框 -->
    <van-actionsheet
      v-model="areaShow">
      <van-area :area-list="areaList" @cancel="cancelArea" :columns-num="3" @confirm="onSelectArea"/>
    </van-actionsheet>

  </div>
</template>

<script>
import { Field, Cell, CellGroup, Button, Actionsheet, Toast, Area, Dialog, NavBar } from 'vant';
import areaList from './../../utils/area.js'
export default {
  components:{
    [Button.name]:Button,
    [Field.name]:Field,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [Actionsheet.name]:Actionsheet,
    [Toast.name]:Toast,
    [Area.name]:Area,
    [Dialog.name]:Dialog,
    [NavBar.name]:NavBar,
  },
  data(){
    return{
      money:'',//希望借款金额
      unitName:'',//单位name
      show:false,//收入等弹窗显示
      actions: [],//收入数据
      incomeValue:'请选择',//收入选择
      marriageValue:'请选择',//婚配选择
      carValue:'请选择',//车辆选择
      areaShow:false,//城市列表数据
      areaList,
      unitValue:'选择所在城市',//公司地址
      unitAddress:'', //公司详细地址
      unitCode:0,
      homeValue:'选择居住城市',//住址
      homeAddress:'',
      homeCode:0,
      type:'',//判断地址选择
      token:''
    }
  },
  mounted(){
    _hmt.push(['_trackPageview', '/basic-info']);
    this.$util.goBack(Dialog);
    Toast.loading({duration:1000,mask: false,message: '加载中...'});
    let _this = this;
    // 获取本地数据
    this.$util.getUser().then(token=>{
       _this.token=token;
      console.log(token)

      // if(token!='-1'){

      // }

    })
  },

  methods:{
    onClickLeft(){
      this.$util.url('/HomeBefore','首页',Dialog);
    },
    //公司名称最多40个字符
    changeValue(){
     if(this.unitName.length>=20){
        this.unitName = this.unitName.substring(0,19)
     }
    },
    changeValue1(){
      if(this.unitAddress.length>=20){
        this.unitAddress = this.unitAddress.substring(0,19)
      }
    },
    changeValue2(){
      if(this.homeAddress.length>=20){
        this.homeAddress = this.homeAddress.substring(0,19)
      }
    },
    // 选择月收入
    income(){
      this.show=!this.show;
      this.actions=[
        {type:1,id:0 ,name: '无固定收入'},
        {type:1,id:1 ,name: '0-3000元'},
        {type:1,id:2 ,name: '3000-6000元'},
        {type:1,id:3 ,name: '6000-10000元'},
        {type:1,id:4 ,name: '10000元以上'},
      ]
    },
    // 婚姻选择
    marriage(){
      this.show=!this.show;
      this.actions=[
        {type:2,id:5 ,name: '未婚'},
        {type:2,id:6 ,name: '初婚'},
        {type:2,id:7 ,name: '再婚'},
        {type:2,id:8 ,name: '丧偶'},
        {type:2,id:9 ,name: '离异'},
      ]
    },
    // car 车选择
    car(){
      this.show=!this.show;
      this.actions=[
        {type:3,id:1 ,name: '有'},
        {type:3,id:0 ,name: '无'},
      ]
    },
    //选择值
    onSelect(item){
      this.show = false;
      if(item.type==1){
        this.incomeValue = item.name;
        this.incomeId = item.id
      }else if(item.type==2){
        this.marriageValue = item.name
        this.marriageId = item.id
      }else{
        this.carValue = item.name
        this.carId = item.id
      }
    },
    // 城市弹窗
    areaClick(type){
      this.type = type;
      this.areaShow =!this.areaShow;
    },
    cancelArea(){
      this.areaShow =!this.areaShow;
    },
    // 城市选择
    onSelectArea(item){
      console.log(item)
      this.areaShow =!this.areaShow;
      if(this.type == 'unit'){
        this.unitCode = item[2].code;
        this.unitValue = `${item[0].name} ${item[1].name} ${item[2].name}`;
        this.companyProvince = item[0].code; //省
        this.companyCity = item[1].code;//城市
        this.companyCounty = item[2].code; //区
      }else{
        this.homeCode = item[2].code;
        this.homeValue = `${item[0].name} ${item[1].name} ${item[2].name}`;
        this.dwellProvince = item[0].code //省
        this.dwellCity = item[1].code //市
        this.dwellCounty = item[2].code //区
      }

    },
    // 弹窗
    dialog(){
      Dialog.alert({
        title: '填写规范',
        message: '小区类：XX路XX号XX小区XX栋XX室<br/>农村类：XX县XX镇XX村XX组<br/>大厦类：XX路XX号XX大厦XX层XX室<br/><br/>如果无法继续精准到门牌号，参考格式：”XX叉口向东100米"、"XX建筑物对面"等，请尽量精准'
      }).then(() => {
        // on close
      });
    },
    // 下一步
    btnClick(){
      let _this = this;
      if(this.money<1000){
        Toast('最低借款1000元哦');
        return;
      }
      if(this.money>20000){
        Toast('最高可借20000元哦');
        return;
      }
      if(this.unitName.length<=5){
        Toast('请完善单位名称');
        return;
      }
      if(this.unitAddress.length<=5){
        Toast('请完善单位信息');
        return;
      }
      if(this.homeAddress.length<=6){
        Toast('请完善居住信息');
        return;
      }
      Toast.loading({message: '加载中...'});
      this.$api.post('/borrowBefore/v1/saveBaseInfo',{
        "bankrollCode": this.$util.bankrollCode,
        "companyAddress": this.unitAddress,
        "companyCity": this.companyCity,
        "companyCounty": this.companyCounty,
        "companyName": this.unitName,
        "companyProvince": this.companyProvince,
        "dwellAddress": this.homeAddress,
        "dwellCity": this.dwellCity,
        "dwellCounty": this.dwellCounty,
        "dwellProvince": this.dwellProvince,
        "haveCar": this.carId,
        "loanAmount": this.money,
        "maritalStatus": this.marriageId,
        "monthlyIncome": this.incomeId
      },s=>{
        console.log(s)
        Toast.clear();
        if(s.module.step ==20){
          //  _this.$router.push({ path: '/contactInfo'})
           _this.$util.url('/contactInfo','联系人信息')
        }else{
          Toast(s.module.step);
        }
      },f=>{
        if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
          _this.$util.url('/HomeBefore','首页')
        }else{
          Toast(f.errorMessage);
        }
      },{
        'Content-Type': 'application/json',
        'Accept': "*/*",
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':this.token
      })
    }

  }
}
</script>

<style>
  /* .van-slider--disabled {
    opacity: 1;
  } */
  .van-cell__title.width100{
    width:100px;
    flex:0.3;
  }
</style>

<style scoped lang="scss">
  /***
  * 产品主题颜色需求
  * #FF8024 按钮 突出文字 ico
  * #FFD500 B辅助色
  * #FFEC9C c辅助色
  * #1D0F00 重要文字
  * #41424E 副标题段落
  * #797A79 次要文字
  * #A9AAA9 不可点击
  * #E6E6E6 分割线 描边
  * #F6F7F6 背景
  * #6699CC 链接
  */
  .aaa{
    width:100px;
  }
.basic-info{
  width:100%;
  height:100%;
  background: #F6F7F6;
}
.slider-box{
  position: fixed;
  top:50;
  z-index:100;
  width:100%;
  height:24px;
  background: #F6F7F6;
}
.slider{
  width:100%;
  height:6px;
  margin-top:9px;
  background: #E6E6E6;
  .slider-bar{
    position: relative;
    width:25%;
    height:6px;
    background: #FF8024;
  }
  .slider-button{
    position: absolute;
    top:-4px;
    right:-13px;
    width:30px;
    height:14px;
    background: #fff;
    border-radius: 2px;
    font-size:10px;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.10);
    color:#FF8024;
  }
}
.form{
  // margin-top:13px;
  margin-top:24px;
  text-align: left;
}
.btn{
  width:90%;
  margin-top:40px;
  background:#FF8024;
  color:#fff;
}


</style>

